<template>
  <q-tree
    :nodes="simple"
    v-model:ticked="ticked"
    @update:ticked="updateValue"
    node-key="title"
    label-key="title"
    tick-strategy="leaf"
    :default-expand-all="defaultExpand"
  />
</template>

<script setup>
import { computed, ref } from "vue";

// 这些属性代表着组件从父组件接收到的数据
const props = defineProps({
  simple: {
    type: Array,
    default: () => [],
  },
  ticked: {
    type: Array,
    default: () => [],
  },
  defaultExpand: {
    type: Boolean,
    default: true,
  },
});
// defineEmits用于声明组件的自定义事件
const emit = defineEmits(["update:modelValue"]);
const simple = computed(() => props.simple);
const ticked = ref(props.ticked);

// const ticked = ref([])
function updateValue(value) {
  console.log(value);
  emit("update:modelValue", value);
}
</script>

<style scoped></style>
